<template>
    <div class="mv w">
        <div class="cat">
            <div>区域</div>
            <span @click="setCurrentCat('全部')" :class="currentArea == '全部' ? 'current-cat' : ''">全部</span>
            <span @click="setCurrentCat('内地')" :class="currentArea == '内地' ? 'current-cat' : ''">内地</span>
            <span @click="setCurrentCat('港台')" :class="currentArea == '港台' ? 'current-cat' : ''">港台</span>
            <span @click="setCurrentCat('欧美')" :class="currentArea == '欧美' ? 'current-cat' : ''">欧美</span>
            <span @click="setCurrentCat('日本')" :class="currentArea == '日本' ? 'current-cat' : ''">日本</span>
            <span @click="setCurrentCat('韩国')" :class="currentArea == '韩国' ? 'current-cat' : ''">韩国</span>
        </div>
        <div class="list">
            <div class="title">{{currentArea}}MV</div>
            <div class="item-wrap" v-if="mvs != null">
                <div
                :key="index"
                v-for="(item, index) in mvs"
                class="item">
                    <div class="pic">
                        <div @click="jumpMVInfo(item.id)" class="mask">
                            <span class="iconfont">&#xe682;</span>
                        </div>
                        <img :src="item.cover">
                    </div>
                    <div @click="jumpMVInfo(item.id)" class="mv-name">{{item.name}}</div>
                    <div @click="jumpSingerInfo(item.artists[0].id)" class="singer-name">{{item.artistName}}</div>
                    <div class="public iconfont">&#xe609;{{item.playCount}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // mv
            mvs: null,
            // 当前选择MV地区
            currentArea: '全部',
            // 参数
            params: {
                area: this.currentArea,
                offset: 0,
                limit: 52
            }
        }
    },
    mounted() {
        this.getMvData();
    },
    methods: {
        // 获取mv数据
        async getMvData() {
            let { data: res } = await this.$http.get('/top/mv', { params: this.params });
            this.mvs = res.data;
        },
        // 设置当前选中的MV地区
        setCurrentCat(area) {
            this.currentArea = area;
            if (area == '全部') {
                this.params.area = '';
            } else {
                this.params.area = area;
            }
            this.getMvData();
        },
        // 跳转到歌手详情
        jumpSingerInfo(id) {
            this.$router.push(`/singer/info/${id}`);
        },
        // 跳转到MV详情
        jumpMVInfo(id) {
            this.$router.push(`/mv/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.mv {
    padding-top: 50px;
}

.cat {
    div {
        display: inline-block;
        height: 30px;
        padding: 0 6px;
        line-height: 30px;
        text-align: center;
        margin-right: 34px;
        font-size: 14px;
        color: #000;
    }
    span {
        display: inline-block;
        height: 30px;
        padding: 0 6px;
        line-height: 30px;
        text-align: center;
        margin-right: 34px;
        font-size: 14px;
        color: #000;
        cursor: pointer;
        &:hover {
            color: #48c686;
        }
    }
    .current-cat {
        color: #fff!important;
        background-color: #48c686!important;
    }
}

.list {
    margin-top: 60px;
    .title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    .item-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
            width: 23%;
            margin-bottom: 30px;
            .pic {
                position: relative;
                width: 100%;
                height: 160px;
                cursor: pointer;
                &:hover .mask {
                    display: block;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
                .mask {
                    display:none;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .4);
                    &:hover .iconfont {
                        opacity: 1;
                        font-size: 50px;
                    }
                    .iconfont {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 10px;
                        color: #fff;
                        opacity: 0;
                        transition: all .3s;
                        font-weight: 700;
                    }
                }
            }
            .mv-name {
                margin-top: 10px;
            }
            .mv-name,
            .singer-name,
            .public {
                font-size: 14px;
            }
            .singer-name {
                margin: 6px 0;
            }
            .singer-name,
            .mv-name {
                cursor: pointer;
                &:hover {
                    color: #48c686;
                }
            }
            .public {
                color: #999;
            }
        }
    }
}
</style>